<template>
<div>
  <div class="chartbox1">
    <div class='echart-brand'>
      <div id='out-in-brand-charts' style='width:96%;height:96%'></div>
    </div>
  </div>
</div>
</template>

<script>
export default {
    name:"outInBrand",
    props:['compareCarPrice'],
    watch:{
      compareCarPrice(){
        this.renderCharts(this.compareCarPrice)
      }
    },
    methods:{
      renderCharts(data){
         var brandCharts = this.$echarts.init(document.getElementById('out-in-brand-charts'));
         var option = {
            title:{
                text:'销售车辆价格分析',
              textStyle: {
                color: '#00dcde',
                // fontWeight: 'lighter',
                fontSize: 16,
              },
              left: 10,
              top: 10
            },
            grid:{
                left:'10%',
                top:'20%',
            },
            xAxis:{
               data:this.dealData(data,'priceRemark'),
               axisLabel:{
                    color:"#fff",
                    fontSize:'13',
                    rotate:40
               }
            },
            yAxis:{
               axisLabel:{
                     color:"#fff",
                     fontSize:'14'
               },
              splitLine:{
                lineStyle:{
                  color:['rgba(255,255,255,0.2)']
                }
              }
            },
            series:[{
               name:"品牌",
               type:"bar",
               barWidth:'40',
               stack:true,
               data:this.dealData(data,'storageNum'),
               itemStyle:{
                    color:'#00dcde'
               }
            }]
         };
         brandCharts.setOption(option)
      },
      dealData(data,name){
        var arr = [];
        for(var i=0;i<data.length;i++){
          arr.push(data[i][name])
        }
        return arr
      }
    }
}
</script>

